<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta charset="utf-8" />
  <title>贵州历史文化网后台管理</title>
  <meta name="description" content="Restyling jQuery UI Widgets and Elements" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="__static__/assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="__static__/assets/css/font-awesome.min.css" />
  <link rel="stylesheet" href="__static__/assets/css/ace-fonts.css" />
  <link rel="stylesheet" href="__static__/assets/css/ace.min.css" id="main-ace-style" />
  <!--[if lte IE 9]>
  <link rel="stylesheet" href="__static__/assets/css/ace-part2.min.css" />
  <![endif]-->
  <!--[if lte IE 9]>
  <link rel="stylesheet" href="__static__/assets/css/ace-ie.min.css" />
  <![endif]-->
  <script src="__static__/assets/js/ace-extra.min.js"></script>
  <!--[if lte IE 8]>
  <script src="__static__/assets/js/html5shiv.min.js"></script>
  <script src="__static__/assets/js/respond.min.js"></script>
  <![endif]-->
  <style type="text/css">
    .CSSearchTbl{ border:1px #008CD4 solid;}
    .CSSearchTbl thead{}
    .CSSearchTbl thead tr{}
    .CSSearchTbl thead tr th{  text-align:left; padding-left:10px;}
    .CSSearchTbl tbody{}
    .CSSearchTbl tbody tr{}
    .CSSearchTbl tbody tr td{  padding: 10px;}
    .CSSearchTbl tbody tr td.right{ text-align: left;}
    .CSSearchTbl tbody tr td.left{ text-align: right;}
    .table-responsive{ display: none;}
  </style>
</head>

<body class="no-skin">
<!-- #section:basics/navbar.layout -->
<div id="navbar" class="navbar navbar-default">

  {include file="./public/top" /}
</div>

<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">

  <!-- #section:basics/sidebar -->
  {include file="./public/left" /}

  <!-- /section:basics/sidebar -->
  <div class="main-content">
    <div class="breadcrumbs" id="breadcrumbs">
      <ul class="breadcrumb">
        <li>
          <i class="ace-icon fa fa-home home-icon"></i>
          <a href="index.html">首页</a>
        </li>
        <li>
          <a href="javascript:void(0)">精推管理</a>
        </li>
        <li>
          <a href="elements.html">精推轮播图</a>
        </li>
      </ul><!-- /.breadcrumb -->

      <!-- #section:basics/content.searchbox -->
    </div>
    <div class="page-content">

      <!-- /section:settings.box -->
      <div class="page-content-area">
        <button type="button" tooltip="添加轮播图" class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('add')}'"> <i class="fa fa-plus"></i> Add
        </button>
        <div class="row">
          <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="row">
              <div class="col-xs-12">
                <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th style="width: 35%;">图片</th>
                    <th>状态</th>
                    <th style="width: 20%;" class="hidden-480">操作</th>
                  </tr>
                  </thead>

                  <tbody style="text-align: center;">
                  {volist name="sift_banner" id="banner" key='k'}
                  <tr>
                    <td>{$k}</td>
                    <td><img style="width: 170px;height: 60px;" src="{$banner.url}"/></td>
                    <td class="td-status"><span class="label label-success radius" onclick="edit_status({$banner.id})" >
                                                        {if condition="$banner['status'] neq '0'"}
                                                        可显示
                                                        {else /}
                                                        不可显示
                                                        {/if}
                                                    </span></td>
                    <td>
                      <div class="hidden-sm hidden-xs btn-group">
                        <!-- <button class="btn btn-xs btn-success" onClick="javascript:window.location.href = '{:url('add')}'">
                            <i class="ace-icon fa fa-check bigger-120"></i>
                        </button> -->

                        <button class="btn btn-xs btn-danger" onClick="picture_del({$banner.id})">
                          <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  {/volist}
                  </tbody>
                </table>
              </div><!-- /.span -->
              <div style="padding-top:10px;">
              </div>
            </div><!-- /.row -->

          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.page-content-area -->
    </div><!-- /.page-content -->
  </div><!-- /.main-content -->


  <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
  </a>
</div><!-- /.main-container -->

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
  window.jQuery || document.write("<script src='__static__/assets/js/jquery.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
  window.jQuery || document.write("<script src='__static__/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
  if('ontouchstart' in document.documentElement) document.write("<script src='__static__/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="__static__/assets/js/bootstrap.min.js"></script>

<script src="__static__/assets/js/jquery.dataTables.min.js"></script>
<script src="__static__/assets/js/jquery.dataTables.bootstrap.js"></script>

<!-- ace scripts -->
<script src="__static__/assets/js/ace-elements.min.js"></script>
<script src="__static__/assets/js/ace.min.js"></script>
<script type="text/javascript" src="__static__/lib/layer/2.4/layer.js"></script>
<!-- <script type="text/javascript" src="__static__/lib/jquery/1.9.1/jquery.min.js"></script> -->

<script type="text/javascript">

  /*图片-删除*/
  function picture_del(id) {
    layer.confirm('确认要删除吗？', function () {
      $.ajax({
        type: 'post',
        url: "{:url('sift_banner/delData')}",
        data: {id: id},
        dataType: 'json',
        success: function (res) {
          if (res.code == 1){
            // $(obj).parents("tr").remove();
            layer.msg(res.msg, {icon: 1, time: 1000});
            setTimeout(function () {
              window.location.reload();
            }, 1500)
          }else {
            layer.msg(res.msg);
          }

        },
        error: function (res) {
          console.log(res.msg);
        },
      });
    });
  }

  // 更改图片状态
  function edit_status(id) {
    layer.confirm('确认要更改吗？', function () {
      $.ajax({
        type: 'post',
        url: "{:url('sift_banner/status')}",
        data: {id: id},
        dataType: 'json',
        success: function (res) {
          if (res.code == 1){
            // $(obj).parents("tr").remove();
            layer.msg(res.msg, {icon: 1, time: 1000});
            setTimeout(function () {
              window.location.reload();
            }, 1500)
          }else if(res.code == 2){
            layer.msg(res.msg, {icon: 1, time: 1000});
          }else {
            console.log(res.msg);
          }
        },
        error: function (res) {
          console.log(res.msg);
        },
      });
    });
  }

  jQuery(function($) {

    $(".tbl-search").click(function(){
      $(".table-responsive").slideDown("fast");
    })

    var oTable1 =
        $('#sample-table-2')
            .dataTable( {
              bAutoWidth: false,
              bInfo:flase,
              "aoColumns": [
                { "bSortable": false },
                null,
                null,
                null,
                null,
                null,
                { "bSortable": false },
                null,
                { "bSortable": false }
              ],
              "aaSorting": [],
            } );

    $(document).on('click', 'th input:checkbox' , function(){
      var that = this;
      $(this).closest('table').find('tr > td:first-child input:checkbox')
          .each(function(){
            this.checked = that.checked;
            $(this).closest('tr').toggleClass('selected');
          });
    });

  })

</script>
</body>
</html>
